<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
  <header>{{msg}}</header>
  <main>
    <section>

    {{arr.length}}&nbsp;&nbsp;<button @click="add">+</button>&nbsp;&nbsp;<button @click="minus">-</button>
    <div v-for="(item, index) in arr">
      {{item.name}}
    </div>
    </section>

    <section>
      <button @click="toggle">切换</button>
      <div v-if="bol">show</div>
      <div v-if ="!bol">hide</div>
    </section>
    <section> 
      <input type="text" v-model="msg">
    </section>
  </main>
  <footer>
  </footer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name:"Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      msg: '这是一行信息',
      arr: [
        {
          name:'狗子',class:"dog"
        },
        {
          name:'猫咪', class:'cat'
        },
        {
          name:'鹦鹉', class: 'bird'
        }
      ],
      bol: false,
      num: 1
    }
  },
  methods:{
    add(){
      this.arr.push({name:'动物' + this.arr.length, class:'god'})
    },
    minus(){
      this.arr.pop()
    },
    toggle(){
      this.bol = !this.bol
    }
  }

})
</script>
<style lang="stylus" scoped>
  header 
    height 60px
    display flex 
    align-items center
    justify-content center 
    font 18px bold
    box-shadow 0px 4px 2px rgba(255,211,31,.3)  
  section 
    margin 20px
    padding 20px
    box-shadow 0 0 4px 2px #ffa631
    border-radius 6px
</style>